<template>
<n-card class="card" :segmented="{ footer: 'soft' }" hoverable >
        <template #header>
            {{item.jobName}}
        </template>
        <n-space vertical>
            <span style="color: rgb(186, 186, 186);">执行类</span>
            <n-ellipsis style="max-width: 100%">{{item.invokeTarget}}</n-ellipsis>
            <span style="color: rgb(186, 186, 186);">定时规则</span>
            <span>{{item.cronExpression}}</span>
        </n-space>
        <template #footer>
            <n-space justify="space-between">
                <popconfirm-btn
                :btn-str="item.status === StatusEnum.READY?'准备就绪':'停用'"
                :confirm-text="'是否确定'+(item.status === StatusEnum.READY?'停用':'启用')+'定时任务'"
                :onPositiveClick="() =>{return changeStatus(item.jobId,item.status) }"
                :type="item.status === StatusEnum.READY?'success':'tertiary'"
                strong secondary
                >
                </popconfirm-btn>
                <div>
                    <!-- <s-more-table-btn> -->
                        <n-space justify="center">

                            <table-popconfirm-btn confirm-text="是否立即执行" tooltip="执行一次" type="warning" style="margin-right: 10px;" icon="ion:caret-forward-circle-outline"  :localIcon="false" :onPositiveClick="() => {return executeNow(item)}"  ></table-popconfirm-btn>
                            <tooltip-btn str="编辑" type="success" :onClick="() =>{return editTask(item)}"></tooltip-btn>
                            <table-popconfirm-btn :onPositiveClick="() => {return deleteTask(item)}"  ></table-popconfirm-btn>
                            <tooltip-btn str="日志" type="primary" :onClick="()=>{handleShowLog(item)}" :localIcon="false" icon="material-symbols:menu-book-outline-sharp"></tooltip-btn>
                        </n-space>
                  <!--  </s-more-table-btn> -->
                </div>
            </n-space>
        </template>
    </n-card>
    <task-log v-model:visible="visibleLog" :jodName="logJodName"/>
</template>
<script  setup lang='ts' >
import { ref, onMounted, reactive } from 'vue'
import TooltipBtn from "~/src/components/custom/tooltip-btn.vue"
import { StatusEnum } from "./index"
import { SysJob } from "."
import TaskLog from "./task-log.vue"
type Props = {
	item:SysJob
	onPositiveClick?: ((e: MouseEvent) => any);
}
const emit = defineEmits(["executeNow","changeStatus","editTask","deleteTask"])
defineProps<Props>();
defineOptions({ name: 'TaskCard' });
const visibleLog = ref(false)
const logJodName = ref<string|null>(null)
function changeStatus(jobId:number|undefined,status:string|undefined){
    const jobStatus =  status === StatusEnum.STOP?StatusEnum.READY:StatusEnum.STOP
    emit("changeStatus",jobId,jobStatus)
}

function executeNow(item:SysJob){
    // if(item.status === StatusEnum.STOP){
    //     window.$message?.error("停用状态无法执行")
    //     return false;
    // }
    if(item.jobId){
        emit("executeNow",item.jobId)
    }else{
        window.$message?.error("数据异常，请刷新页面更新数据")
    }
}

function handleShowLog(item:SysJob){
  if(item.jobId){
    logJodName.value = item.jobName
    visibleLog.value = true
    }else{
        window.$message?.error("数据异常，请刷新页面更新数据")
    }
}

function deleteTask(job:SysJob){
     emit("deleteTask",job)

}

function editTask(job:SysJob){
     emit("editTask",job)

}





</script>

<style lang="scss">
.card{
 width: 500px;
 height: 280px;
 margin: 10px;
 display: inline-block;
}
</style>
